<template>
  <div>
    <Form :label-width="100">
      <FormItem label="名称">
        <Input size="small" v-model="obj.name"/>
      </FormItem>
      <FormItem label="数据源对应值">
        <Input size="small" v-model="obj.datasourceKey" placeholder="datasourceKey"/>
      </FormItem>
      <FormItem label="层级">
        <InputNumber size="small" :max="100" :min="0" v-model="obj.zlevel"></InputNumber>
      </FormItem>

      <Collapse :style="{marginTop: '5px'}">
        <Panel name="1">
          点样式配置
          <div slot="content">
            <FormItem label="点的大小">
              <InputNumber size="small" :max="1000" :min="0" v-model="obj.pointSize"></InputNumber>
            </FormItem>
            <FormItem label="点的模糊尺寸">
              <InputNumber size="small" :max="1000" :min="0" v-model="obj.blurSize"></InputNumber>
            </FormItem>
            <FormItem label="最小透明度">
              <InputNumber size="small" :max="1" :min="0" :step="0.1" v-model="obj.minOpacity"></InputNumber>
            </FormItem>
            <FormItem label="最大透明度">
              <InputNumber size="small" :max="1" :min="0" :step="0.1" v-model="obj.manOpacity"></InputNumber>
            </FormItem>
          </div>
        </Panel>
        <Panel name="2">
          视觉映射组件
          <div slot="content">
            <slot name="visualMapSettingForm"></slot>
          </div>
        </Panel>
        <Panel name="100">
          静态数据
          <div slot="content">
            <CodeEditor v-model="staticData" mode="json" @on-submit-change="updateData"></CodeEditor>
          </div>
        </Panel>
      </Collapse>

    </Form>
  </div>
</template>

<script>
export default {
  name: "CPMSeriesHeatmapSettingForm",
  props: {
    value: {
      type: Object
    }
  },
  data() {
    return {
      obj: this.value,
      staticData: null,
    }
  },
  mounted() {
    this.staticData = JSON.stringify(this.obj.data, null, 2);
  },
  methods: {
    updateData () {
      this.obj.data = JSON.parse(this.staticData)
    }
  },
  computed: {},
  watch: {
    value (val) {
      this.obj = val;
    },
    obj (val) {
      this.$emit('input', val);
    }
  }
}
</script>

<style scoped>

</style>